<template>
  <div class="nav">
    <div>
      <ul>
        <li>推荐</li>
        <li>实用英语</li>
        <li>兴趣技能</li>
        <li>大学考试</li>
        <li @click="Design">设计创作</li>
      </ul>
    </div>
  </div>
</template>

<script>
export default {
  name: "Nav",
  data() {
    return {
      msg: "hi",
    };
  },
  methods:{
    Design(){
      this.$router.push('/designpage')
    }
  }
};
</script>

<style scoped>
.nav {
  height: 0.5rem;
  z-index: 2;
  background-color: #fff;
}
.nav div {
  height: 100%;
  flex: 1;
  display: flex;
  align-items: center;
  overflow: auto;
  margin-top: -0.1rem;
}
.nav ul {
  list-style: none;
  flex: 1;
  height: 100%;
  display: flex;
  justify-content: space-around;
  align-items: center;
}
.nav ul li {
  width: 0.9rem;
  text-align: center;
  font-size: 0.14rem;
  color: #373737;
}
.nav ul li:hover {
  color: #ee4234;
}
</style>

